<template>
	<view class="w-100">
		<view class="mt-8 flex-1 ml-3 row-ac" @click="toBack">
			<text class="iconfont icon-xiangzuo mr-1"></text>返回
		</view>
		<view class="flex-1 row">
			<view class="head-logo">
				<!-- <image :src="webLogo" mode=""></image> -->
			</view>
		</view>
		<view class="flex-1 mt-5 mx-7 row-a-j-fc">
			<view class="row input-box w-100 row-ac">
				<view class="iconfont icon-yonghu"></view>
				<input type="text" placeholder="用户名/电话/邮箱" v-model="loginQueryInfo.username" value="" class="flex-1" />
			</view>
			<view class="row input-box w-100 mt-2 row-ac">
				<view class="iconfont icon-mima"></view>
				<input type="password" placeholder="密码" value="" v-model="loginQueryInfo.password" class="flex-1" />
			</view>
			<view class="login-button row mt-4" @click="toLogin"
				:class="loginInput  == true ? 'login-button-bg2' : 'login-button-bg1'">登录</view>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="flex-1 row-a-j-fc" style="margin-top: 168rpx;">
			<view class="login-box row text-white" @click="whatlogin">
				<view class="iconfont icon-weixin1 mr-2"></view>
				快捷登录
			</view>
		</view>
		<!-- #endif -->
		<view class="flex-1 row font-s-2 mt-3">
			<view class="">找回密码</view>
			<view class="mx-1">|</view>
			<view class="" @click="navTo('/pages/public/register')">注册账号</view>
		</view>
	</view>
</template>
<script>
	import {
		loginUrl
	} from '@/api/index.js';
	import request from "@/utils/request"
	export default {
		data() {
			return {
				loginQueryInfo: {
					username: '',
					password: ''
				},
			}
		},
		onLoad(options) {
			if(options.makCode){
				this.makId = options.makCode
				console.log(this.makId);
			}
		},
		computed: {
			loginInput() {
				if (this.loginQueryInfo.username !== '' && this.loginQueryInfo.password !== '') {
					return true
				} else {
					return false
				}
			}
		},
		methods: {
			toLogin() {
				this.$R.post(loginUrl, this.loginQueryInfo).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
						let resUserInfo = res.data;
						uni.setStorage({
							key: 'userInfo',
							data: resUserInfo
						});
						uni.setStorage({
							key: 'token',
							data: resUserInfo.access
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
					if (res.msg == '登录成功') {
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1000);
					}
				})
			},
			whatlogin() {
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
								uni.request({
									url: request.baseUrl + '/wechat-login/',
									method: 'POST',
									data: {
										js_code: loginRes.code,
										encrypted_data: infoRes.encryptedData,
										iv: infoRes.iv,
										username: loginRes.code,
									},
									success: function(res) {
										if (res.data.code == 200) {
											uni.showToast({
												title: res.msg,
												icon: 'none'
											});
											let resUserInfo = res.data;
											uni.setStorage({
												key: 'userInfo',
												data: resUserInfo.userInfo
											});
											uni.setStorage({
												key: 'token',
												data: resUserInfo.token.access
											});
											setTimeout(() => {
												uni.navigateBack({
													delta: 1
												});
											}, 1000);
										} else {
											uni.showToast({
												title: res.data.msg,
												icon: 'none'
											});
										}
										// 登陆成功后的操作
									}
								});
							}
						});
					}
				});
			},
			navTo(url) {
				uni.navigateTo({
					url: url,
				});
			},
			toBack() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>
<style lang="scss">
	.head-logo {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		background-color: #E4E4E4;
		margin-top: 220rpx;

		image {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
		}
	}

	.input-box {
		border: none;
		border-radius: 2.5rem;
		box-shadow: 0 0 60rpx 0 rgba(43, 86, 112, .1);
		flex-direction: row;
		color: #333333;
		padding: 40rpx 32rpx;
		margin: 32rpx 0;

		input {
			flex: 1;
			text-align: left;
			font-size: 28rpx;
			padding-right: 10rpx;
			margin-left: 20rpx;
		}
	}

	.login-button {
		width: 388rpx;
		height: 96rpx;
		border-radius: 16rpx;
	}

	.login-button-bg1 {
		background-color: #E4E4E4;
	}

	.login-button-bg2 {
		background-color: #2f9c3a;
		color: #fff;
	}

	.login-box {
		width: 388rpx;
		height: 86rpx;
		border-radius: 16rpx;
		background-color: #2f9c3a;
	}
</style>